/* 获取元素 */
const screens = document.querySelectorAll(".screen");
const choose_insect_btns = document.querySelectorAll(".choose-insect-btn");
const start_btn = document.getElementById("start-btn");
const game_container = document.getElementById("game-container");
const timeEl = document.getElementById("time");
const scoreEl = document.getElementById("score");
const message = document.getElementById("message");
/* 初始值 */
let seconds = 0;
let score = 0;
let selected_insect = {};
/* 开始按钮点击事件 */
start_btn.addEventListener("click", () => {
  /* screens中第一个元素添加上up类样式 */
  return screens[0].classList.add("up");
});
/* 所有的昆虫按钮添加上点击事件 */
choose_insect_btns.forEach((btn) => {
  btn.addEventListener("click", () => {
    /* 获取到当前按钮元素里面的图片 */
    const img = btn.querySelector("img");
    /* 获取到当前按钮元素里面的图片的src属性 */
    const src = img.getAttribute("src");
    /* 获取到当前按钮元素里面的图片的alt属性 */
    const alt = img.getAttribute("alt");
    /* 赋值给selected_insect  */
    selected_insect = { src, alt };
    /* screens中第二个元素添加上up类样式  */
    screens[1].classList.add("up");
    /* 设置定时器 */
    setTimeout(createInsect, 1000);
    startGame();
  });
});
function createInsect() {
  /* 创建一个div元素 */
  const insect = document.createElement("div");
  /* 给div元素添加上insect类样式 */
  insect.classList.add("insect");
  /* 得到随机生成的x和y */
  const { x, y } = getRandomLocation();
  /* 得到随机生成的x和y 设置给创建的div */
  insect.style.top = `${y}px`;
  insect.style.left = `${x}px`;
  /* 在创建的div元素中添加一个img元素并设置它的样式 */
  insect.innerHTML = `<img src="${selected_insect.src}" alt="${
    selected_insect.alt
  }" style="transform: rotate(${Math.random() * 360}deg)" />`;
  /* 给创建的div元素添加一个点击事件 */
  insect.addEventListener("click", catchInsect);
  /* 把创建的div元素添加进game_container元素中 */
  game_container.appendChild(insect);
}
function startGame() {
  /* 重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔 */
  setInterval(increaseTime, 1000);
}
function increaseTime() {
  let m = Math.floor(seconds / 60);
  let s = seconds % 60;
  m = m < 10 ? `0${m}` : m;
  s = s < 10 ? `0${s}` : s;
  timeEl.innerHTML = `Time: ${m}:${s}`;
  seconds++;
}

function getRandomLocation() {
  /* 返回以像素为单位的窗口的内部宽度 */
  const width = window.innerWidth;
  /* 返回以像素为单位的窗口的内部高度 */
  const height = window.innerHeight;
  const x = Math.random() * (width - 200) + 100;
  const y = Math.random() * (height - 200) + 100;
  return { x, y };
}
function catchInsect() {
  increaseScore();
  /* 创建的div添加上caught类样式 */
  this.classList.add("caught");

  setTimeout(() => this.remove(), 2000);
  addInsects();
}
function increaseScore() {
  /* 自增 */
  score++;
  if (score > 19) {
    /* message元素添加上visible类样式 */
    message.classList.add("visible");
  }
  /* 将scoreEl元素的内容更改 */
  scoreEl.innerHTML = `Score: ${score}`;
}

function addInsects() {
  setTimeout(createInsect, 1000);
  setTimeout(createInsect, 1500);
}
